<template>
	<div class="BackstageIndex">
		<div class="header">
			Super Hero
		</div>
		<div class="body">
			<table>
				<tr>
					<td @click="$router.push('/users/discount')">
						<div class="yuan">
							<img :src="bat" height="86" width="86"/></div>
						<div class="hongzi">
							优惠
						</div>
					</td>
					<td @click="$router.push('/users/hot')">
						<div class="yuan">
							<img :src="supe" height="86" width="86"/></div>
						<div class="hongzi">
							热门
						</div>
					</td>
					<td @click="$router.push('/users/rank')">
						<div class="yuan">
							<img :src="captain" height="86" width="86"/></div>
						<div class="hongzi">
							排行榜
						</div>
					</td>
				</tr>
				<tr>
					<td @click="$router.push('/users/collection')">
						<div class="shanghu">
							<Icon type="ios-heart-outline" size="60" color="white" class="man"/>
						</div>
						<div class="hongzi">
							收藏
						</div>
					</td>
					<td @click="$router.push('/users/account')">
						<div class="shanghu">
							<Icon type="ios-contact" size="60" color="white" class="man" />
						</div>
						<div class="hongzi">
							账户
						</div>
					</td>
					<td @click="$router.push('/users/order')">
						<div class="shanghu">
							<Icon type="ios-paper-outline" size="60" color="white" class="dingdan"  />
						</div>
						<div class="hongzi">
							订单
						</div>
					</td>
				</tr>
				<tr>
					<td @click="$router.push('/users/shoping')">
						<div class="yuan">
							<img :src="spider" height="86" width="86"/></div>
						<div class="hongzi">
							团购
						</div>
					</td>
					<td @click="$router.push('/users/circle')">
						<div class="yuan">
							<img :src="giant" height="86" width="86"/></div>
						<div class="hongzi">
							吃货圈
						</div>
					</td>
					<td @click="$router.push('/users/nearby')">
						<div class="yuan">
							<img :src="steel" height="86" width="86"/></div>
						<div class="hongzi">
							附近
						</div>
					</td>
				</tr>
			</table>
		</div>
	</div>
</template>

<script>
	export default {
		name: "BackstageIndex",
		data(){
			return{
				steel:require("../../assets/index_man.png"),
				captain:require("../../assets/index_cptent.png"),
				spider:require("../../assets/index_spadman.png"),
				giant:require("../../assets/index_gruee.png"),
				bat:require("../../assets/index_batman.png"),
				supe:require("../../assets/index_super.png"),
			}
		},
		mounted() {
			var users = JSON.parse(localStorage.users)
		},
		methods:{

		}

	};
</script>

<style lang="less">
	.BackstageIndex{
		max-width: 700px;
		margin: auto;
		.header{
			max-width: 700px;
			margin: auto;
			width: 100%;
			height: 70px;
			background: rgb(155,177,200);
			text-align: center;
			color: aliceblue;
			font-size: 30px;
			padding: 12px 0px;
			line-height: 1.5;
		}
		.body{
			max-width: 700px;
			margin: auto;
			background: rgb(206,216,226);
			position: absolute;
			top: 70px;
			left: 0;
			right: 0;
			bottom: 0;
			line-height: 1.5;
		}
		table{
			margin-top: 80px;
			width: 100%;
		}
		.yuan{
			width: 90px;
			height: 90px;
			border-radius:50%;
			margin: auto;
			padding: 2px;
			background: white;
		}
		.yuan>img{
			border: 0px solid ;
			border-radius: 50%;
		}
		.hongzi{
			margin-top: 3px;
			color: #de393e;
			text-align: center;
			font-size: 17px;
			font-family: YouYuan;
		}
		tr{
			height: 140px;
		}
		.shanghu{
			margin: auto;
			width: 90px;
			height: 90px;
			border-radius:50%;
			padding: 14px;
			background: rgb(206,216,226);
			border: white 2px solid;
		}
		.man{
			width: 40px;
			height: 40px;
		}
		.zuhe{
			width: 110px;
			height: 110px;
		}
	}
</style>